<template>
  <div class="login">
    <div class="header">
      <img
        src="../assets/logo.png"
        alt=""
        style="margin-right: auto; width: 350px"
      />
      <div style="margin-left: auto; display: flex; align-items: flex-end">
        <p style="font-size: 1.5em">你好，欢迎登录</p>
      </div>
    </div>
    <div class="main">
      <div class="loginImg">
        <img
          src="../assets/login.png"
          alt=""
          style="width: 600px; transform: scale(1.2, 1.2)"
        />
      </div>
      <div class="loginForm">
        <div class="formHead">
          <p style="color: red; text-align: center; font-size: larger">
            账户登录
          </p>
        </div>
        <hr style="margin-bottom: 20px" />
        <el-form
          status-icon
          class="demo-ruleForm"
          :rules="rules"
          :model="readerInfo"
          ref="ruleFormLogin"
        >
          <el-form-item prop="name">
            <el-input
              placeholder="请输入账户"
              prefix-icon="el-icon-user"
              v-model="readerInfo.userId"
              autocomplete="off"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password"
            ><el-input
              type="password"
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              v-model="readerInfo.password"
              autocomplete="off"
            ></el-input
          ></el-form-item>

          <el-form-item>
            <el-button
              type="danger"
              @click="submitForm('ruleFormLogin')"
              style="width: 100%"
              >登录</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-link
              type="danger"
              style="margin-left: 120px; font-size: large"
              @click="toRegister"
            >
              注册>
            </el-link>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import Footer from "../components/front/Footer.vue";
import axios from "axios";

export default {
  name: "Login",
  components: {
    Footer,
  },
  data() {
    return {
      readerInfo: {
        userId: "", //用户名
        password: "", //密码
        agreement: true, //复选框
      },
      //前端校验信息
      rules: {
        userId: {
          required: true,
          message: "用户名不能为空",
          trigger: "blur",
        },
        password: {
          required: true,
          message: "密码不能为空",
          trigger: "blur",
        },
        agreement: [
          {
            type: "boolean",
            required: true,
            message: "请勾选同意协议",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        //未验证通过则直接return
        if (!valid) return this.$message.error("登录失败");
        //发送登录请求验证
        axios
          .post(
            "/user/login",
            {
              userId: this.readerInfo.userId,
              password: this.readerInfo.password,
              nickname: "",
              userImg: "",
              phone: "",
            },
            {
              headers: {
                "Content-Type": "application/json", // 设置请求类型为 JSON
              },
            }
          )
          .then((res) => {
            if (res.data.code === 200) {
              console.log("登录成功");
              this.$router.replace("/home");
              const token = res.data.data.token;
              localStorage.setItem("token", token);
              return this.$message.success("登录成功");
            } else {
              //直接显示后端错误信息
              return this.$message.error(res.data.message);
            }
          })
          .catch((error) => {
            //登录失败发送失败信息
            console.log("Validation failed:", this.readerInfo);
            return this.$message.error("账号或密码错误");
          });
      });
    },
    toRegister() {
      this.$router.push("/register");
    },
  },
};
</script>

<style scoped>
.login {
  height: 100%;
  overflow: hidden;
}
.header {
  display: flex;
  justify-content: space-between;
  margin-left: 15%;
  margin-right: 15%;
  height: 20%;
  margin-bottom: 10px;
  margin-top: 50px;
}
.main {
  background-color: rgba(252, 236, 228, 0.918);
  display: flex;
  height: 60%;
  padding: auto;
}
.loginImg {
  margin-top: 120px;
  margin-left: 300px;
  margin-right: 50px;
  margin-bottom: 120px;
}
.loginForm {
  background-color: white;
  width: 365px;
  height: 385px;
  margin-top: 90px;
  margin-right: 200px;
  margin-left: 80px;
}
.footer {
  height: 20%;
}
.formHead {
  height: 10%;
}
.el-form-item {
  width: 80%;
  margin: auto;
  margin-bottom: 20px;
}
</style>
